<template>
  <div id="APP">

    <div id="app">
      <div class="sel-v-type" style="padding-top: 20px">
        <div>
          <el-radio v-model="radio2" label="1" border size="medium" >直播</el-radio>
        </div>
        <!-- <div>
          <el-radio v-model="radio2" label="2" border size="medium">点播</el-radio>
        </div> -->
      </div>
      <!-- 视频标题 -->
      <div class="v-title">
        <span>视频标题</span>
        <input type="text" name="" v-model="title"  placeholder="请添加一个30字以内的标题~" >
      </div>
      <!-- 绑定ID -->
      <div class="v-title" v-if="radio2 === '1'">
        <span>绑定账号</span>  
        <input type="text" name="" v-model="cId" placeholder="请输入ID~">
      </div>
      <!-- 开始时间 -->
      <div class="v-title">
        <span>开始时间</span>  
        <input @click="openPicker1" type="text" name="" v-model="pickerValue1" placeholder="请选择开始时间" >
      </div>
      <!-- 开始时间 -->
      <div class="v-title">
        <span>结束时间</span>  
        <input @click="openPicker2" type="text" name="" v-model="pickerValue2" placeholder="请选择结束时间" >
      </div>
      <!-- 上传视频 -->
      <div class="up-v" v-if="radio2 === '2'">
        <div class="up-loading">上传视频</div>
        <div>
          <van-uploader accept="video/mp4,video/mov"  v-model="pickerValue2" :after-read="afterRead" /> 
        </div>
      </div>

      <!-- <div class="up-video">
        <div style="margin-right: 1.2rem;">上传视频</div>
        <div class="fix"> 
          <img src="./img/v-upload.png" alt="">
          <input id="u1ploader" type="file" accept="video/mp4,video/mov" multiple="" v-on:change="uploadVideo()">
        </div>
      </div> -->
        <mt-datetime-picker
          ref="picker1"
          type="datetime"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          hour-format="{value} 时"
          minute-format="{value} 分"
          :startDate='startTime1'
          @confirm="handleConfirm1"
          >
        </mt-datetime-picker>
        <mt-datetime-picker
          ref="picker2"
          type="datetime"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          hour-format="{value} 时"
          minute-format="{value} 分"
          :startDate='startTime1'
          @confirm="handleConfirm2"
          >
        </mt-datetime-picker>
      <div class="sel-goods">
        <div style="margin-bottom: .625rem;">添加商品链接</div>
        <div class="fix">
          <!-- :class="isSeltion? 'self active' : 'self'" -->
          <div ref="liId" class="self" v-for="(item,index) in goodsList" :key="item.id" @click="selGoods(index)">
            <img :src="item.image" alt="">
            <div  style="position: absolute;top:0;left:0;font-size:12px;color:#409EFF">
              <marquee behavior="behavior" Scrolldelay="20" style="width:5rem" loop="2" >{{item.name}}</marquee>
              <!-- {{item.name}} Bgcolor="#409EFF"-->
            </div>
            <!-- <div v-if="checkBox.includes(index)" class="select" src="###" alt="已选择图标">已选择图标</div>
            <div v-else class="no-select" src="" alt="待选择图标">待选择图标</div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 复制链接 -->
    <van-dialog v-model="show" title="点击文字复制链接" show-cancel-button :show-confirm-button="false" @confirm="copy">
      <div class="id-item item">
        <div class="order-id" :data-clipboard-text="order" @click="copy">{{ order }}</div>
      </div>
    </van-dialog>
    <van-overlay :show="layShow" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">非法访问</div>
      </div>
    </van-overlay>
    <!-- 发布 -->
    <div class="sure-btn">
      <el-button style="width:100%" type="primary" @click="release">发布</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import Clipboard from 'clipboard';
import { Toast,Dialog } from 'vant';
export default {
   components: {
    [Dialog.Component.name]: Dialog.Component
  },
      data() {
        return {
          show: false,
          layShow: false,
          pickerValue1: '',
          pickerValue2: '',
          order: '',
          apiUrl:'',
          radio2: '1',
          // 视频标题
          title: '',
          // 绑定账号
          cId: '',
          baseUrl: 'http://test.huic.cloud',
          isSeltion: false,
          checkBox: [],
          goodsList: [],
          goods_id: '',
          startTime1: new Date(),
          fileList: [
            // {
            //   url: 'https://img.yzcdn.cn/vant/leaf.jpg',
            //   status: 'uploading',
            //   message: '上传中...'
            // },
            // {
            //   url: 'https://img.yzcdn.cn/vant/tree.jpg',
            //   status: 'failed',
            //   message: '上传失败'
            // }
          ]
        }
      },
      mounted() {
        console.log(this.$route.query.openid)
        if(!this.$route.query.openid) {
          this.layShow = true
          // alert('页面非法访问')
        }else{
          this.getGoodsList()
        }
      },
      methods: {
        openPicker1() {
          this.$refs.picker1.open();
        },
        openPicker2() {
          this.$refs.picker2.open();
        },
        p(s) {
          return s < 10 ? '0' + s : s
        },
        handleConfirm1(e) {
          // console.log('aaa111',this.pickerValue,e)
          let d = new Date(e)
          let resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
          let resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
          this.pickerValue1 = resDate + ' ' + resTime;
        },
        handleConfirm2(e) {
          // console.log('aaa111',this.pickerValue,e)
          let d = new Date(e)
          let resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
          let resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
          this.pickerValue2 = resDate + ' ' + resTime;
        },
        copy() {
          var clipboard = new Clipboard('.order-id') //绑定数据标签的类名
          console.log('copy....',clipboard)
          
          clipboard.on('success', e => {
            console.log('复制成功', e)
            Toast.success('复制成功');
            // 释放内存
            clipboard.destroy()
          })
          clipboard.on('error', e => {
            Toast.fail('该浏览器或手机权限不支持复制功能');
            // 释放内存
            clipboard.destroy()
          })
        },
        // 商品列表
        getGoodsList() {
          let _this = this;
          let openid = this.$route.query.openid
          axios.get('http://app.huic.cloud/mm/view/Home/liveStream/Ajax.php?method=getGoodsList&openid=' + openid)
          .then(function (res) {
            console.log("response", res);
            if(res.data.code === 0) {
              _this.goodsList = res.data.data.list
            }else{
              Dialog.alert({
                message: res.data.msg
              })
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        },
        // 发布
        release() {
          console.log('发布')
          let openid = this.$route.query.openid
          // let openid = 'osb8W0nV7RxejQFAoV_fJM-UjLiE'
          let begin = new Date(this.pickerValue1).getTime()
          let end = new Date(this.pickerValue2).getTime()
          console.log(begin, end)
          if(!this.title) {
            Toast.fail('请输入标题');
            return false
          }
          if(!this.cId) {
            Toast.fail('请输入绑定账号');
            return false
          }
          if(!this.pickerValue1) {
            Toast.fail('请选择开始时间');
            return false
          }
          if(!this.pickerValue2) {
            Toast.fail('请选择结束时间');
            return false
          }
          if(!this.goods_id) {
            Toast.fail('请添加商品');
            return false
          }
          // if(begin > end) {
          //   Toast.fail('开始时间大于结束时间');
          //   return false
          // }

          axios({
            url: 'http://app.huic.cloud/mm/view/Home/liveStream/Ajax.php?method=bindUser&openid=' + openid,
            method: 'post',
            data: qs.stringify({
              title: this.title,
              room_id: this.cId,
              goods_id: this.goods_id,
              start_time: this.pickerValue1,
              end_time: this.pickerValue2,
            })
          })
          // 刚开始传的参数为json后端接收不到
          // axios.post('http://app.huic.cloud/mm/view/Home/liveStream/Ajax.php?method=bindUser&openid=' + openid,{
          //   title: this.title,
          //   room_id: this.cId,
          //   goods_id: this.goods_id
          // },{
          //   headers: {'Content-Type': 'application/x-www-form-urlencoded'} //加上这个
          // })
          .then(res => {
            console.log('tijiaoooooooo',res)
            if(res.data.code === 0) {
              Toast.success('发布成功');
              // 下面弹出复制链接弹框
              // this.show = true;
              // this.order = res.data.data.url;

              // Dialog.confirm({
              //   title: '复制链接',
              //   message: '弹窗内容',
              //   confirmButtonText: '复制'
              // }).then(() => {
              //   // on confirm
              //   this.copy()
              // }).catch(() => {
              //   // on cancel
              // });
            }else{
              Toast.fail(res.data.msg);

            }
           
          }).catch(err => {
            console.log('dddddd',err)
          })
        },
        uploadVideo() {
          console.log('上传视频。。。。。。', document.getElementById('uploader').files)
          var file = document.getElementById('uploader').files[0];
          console.log('上传视频。。。。。。', file)
          if (file.size >= 20 * 1024 * 1024) {
              // $.toast('视频不得大于20MB!', 'text');
              return false;
          } else {
              console.log('上传视频中.........')
              this.upload(file)
          }
        },
          // 上传本地视频
        upload(data) {
          var params = new FormData()
          params.append('videoFile', data)
          params.append('num', 1)
          console.log('params', params)

          axios.post(this.baseUrl + "/api/wechat/upload/video", params, {
              headers: {
                  Authorization: this.token
              }
          }).then(function (res) {
              this.orderData.videos.push(res.body.message);
              $.toast('上传成功');
          }, function (error) {
              console.log('请求失败处理');
              this.$message({
                message: '请求失败处理',
                type: 'warning'
              });
          });
        },
        // vant上传
        afterRead(file) {
          console.log('......vant', file)
          file.status = 'uploading';
          file.message = '上传中...';

          setTimeout(() => {
            file.status = 'success';
            file.message = '';
            console.log(123)
          }, 3000);
        },
        selGoods(index) {
            var idx = this.checkBox.indexOf(index);
            if(this.$refs.liId[index].className == 'self') {
              // 添加类--选中状态
              this.$refs.liId[index].className = 'self active';
              this.checkBox.push(index);
            } else {
              // 选中再取消
              this.$refs.liId[index].className = 'self';
              this.checkBox.splice(idx, 1);
            }
          let idArr = [];
          this.checkBox.forEach(item => {
            idArr.push(this.goodsList[item].id) 
          })
          // console.log(this.checkBox, idArr)
          this.goods_id = idArr.join(',')
          // console.log(this.goods_id)
        },
        sure() {

        }
      }
}
</script>
<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  text-align: center;
  width: 80%;
  line-height: 7.5rem;
  color: red;
  background-color: #fff;
}
 #app {
      padding: 0  .9375rem;
      box-sizing: border-box;
      background: #fff;
      font-size: .875rem;
    }
    .sel-v-type {
      width: 5.55rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      /* border: 1px solid red; */
    }
    .up-video {
      font-size: .875rem;
      display: flex;
      align-items: center;
    }
    .up-video .fix {
      position: relative;
      /* border: 1px solid red; */
    }
    .up-video img {
      width: 3rem;
      height: 3rem;
      vertical-align: baseline;
    }
    #uploader {
      position: absolute;
      top: 0;
      left: 0;
      width: 3rem;
      height: 3rem;
      opacity: 0;
    }
    .v-title {
      margin-top: 1.25rem;
      border-bottom: 1px solid #ccc;
      padding-bottom: .625rem;
    }
    .v-title span {
      display: inline-block;
      width: 21%;
      font-size: .875rem;
      /* border:1px solid red; */
    }
    .v-title input {
      outline: none;
      border: 0;
      width: 70%;
      font-size: .875rem;
      /* border:1px solid blue; */
    }
    .up-v {
      margin: 1.25rem 0;
      padding-bottom: .3125rem;
      border-bottom: 1px solid #ccc;
    }
    .up-loading {
      margin-bottom: .625rem;
    }
    .sel-goods {
      padding-bottom: 1.25rem;
      margin-top: 1.25rem;
    }
    .sel-goods .fix {
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-between; */
    }
    .sel-goods .fix .self{
      position: relative;
      width: 5rem;
      height: 5rem;
      margin-top: .3125rem;
      border: 1px solid #efefef;
    }
    .sel-goods .fix .active{
      border: 1px solid #409EFF;
    }
    .sel-goods .fix .self img {
      width: 4.85rem;
      height: 4.85rem;
    }
    .sure-btn {
      width:80%;
      margin: 2.5rem auto 0;
    }
  .id-item {
    padding: .625rem;
    box-sizing: border-box;
  }
</style>